<template>
	<div id="message-box">
        <header>
		    <h2>{{ title }}</h2>
        </header>
        <div class="msg-content">
		    <div>{{ content }}</div>
        </div>
		<footer>
			<div class="cancel" v-if="cancel" @click="handleCancel">{{ cancel }}</div>
			<div class="ok" v-if="ok" @click="handleOk">{{ ok }}</div>
		</footer>
	</div>
</template>

<script>
export default {
	name: "messageBox"
}
</script>

<style scoped>
#message-box{
    position: fixed;
    left: 50%;
    top: 35%; 
    width:200px;
    height:140px;
    border:1px #ccc solid;
    border-radius: 8px;
    background-color:rgba(255, 255, 255, .95); 
    box-shadow: 0 0 9px #686868;
    transform: translateX(-50%);
    z-index: 100;
}
header h2{
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    border-bottom: 1px solid #ccc;
}
.msg-content div {
    text-align: center;
    line-height:60px;
}
footer {
    display: flex;
    position: absolute;
    bottom: 0; width:100%;
    border-top:1px #ccc solid;
}
footer .cancel,
footer .ok {
    flex:1;
    text-align: center; 
    line-height: 30px;
    border-right:1px #ccc solid;
}
footer .ok{
    border:none;
}
</style>